---
title: Platform Specific | gluestack-ui
description: gluestack-ui provides an easy way to apply different styles on android, ios and web.
---

import { Meta } from '@storybook/addon-docs';

import {
  GluestackUIProvider,
  Text,
  Center,
  Button,
  Box,
  ButtonText,
} from '@gluestack-ui/themed';
import { transformedCode, transformedThemedCode } from '../../../utils';
import Wrapper from '../../../components/Wrapper';

import {
  AppProvider,
  CodePreview,
  Table,
  TableContainer,
  InlineCode,
} from '@gluestack/design-system';

<Meta title="ui/Home/Styling/Platform Specific" />

# Platform Specific

We can provide platform specific styles in the `sx` prop of the component. The `sx` prop takes an object with `_ios`, `_android` and `_web` specific styles.

<AppProvider>
  <CodePreview
    showComponentRenderer={true}
    showArgsController={false}
    metaData={{
      code: `
      <Box justifyContent="center" alignItems="center" h="100%">
        <Box alignItems="center">
          <Button
            $ios-bg="$red500"
            $web-bg="$green500"
            $android-bg="$yellow500"
            >
            <ButtonText>Button</ButtonText>
          </Button>
        </Box>
      </Box>
      `,
      transformCode: (code) => {
        return transformedCode(code);
      },
      scope: {
        Wrapper,
        Text,
        Button,
        Box,
        ButtonText,
      },
      argsType: {},
    }}
  />
</AppProvider>

Expo snack link for above example is provided [here](https://snack.expo.dev/@gluestack/gluestack-ui-platform-specific).